@charset "UTF-8";
.search-box-wrapper .search-input {
  margin-top: 0.5rem;
}

.search-box-wrapper .search-input svg {
  margin-top: 1rem;
}

.search-box-wrapper .search-input input {
  height: 2.5rem;
  line-height: 2.5rem;
  border-radius: 5rem;
}

.search-box-wrapper .search-host-wrapper {
  padding: 12px;
  width: 100vw;
}

.search-box-wrapper .search-host-wrapper .font-header {
  font-size: 13px;
  color: #989797;
  margin-bottom: 10px;
}

.search-box-wrapper .search-host-wrapper .font-content {
  display: flex;
  flex-wrap: wrap;
  padding: 5px 10px;
}

.search-box-wrapper .search-host-wrapper .font-content div {
  font-size: 14px;
  border-radius: 5px;
  background-color: #eee;
  display: inline-block;
  /* 设置为行内块级元素，宽度自适应内容 */
  margin: 5px;
  /* 设置盒子之间的间距，可以根据需要调整 */
  background-color: #f0f0f0;
  /* 设置背景颜色，可以根据需要调整 */
  padding: 10px;
  /* 设置内边距，可以根据需要调整 */
}

.search-box-wrapper .search-class-wrapper {
  width: 100vw;
  /* 设置容器宽度，可以根据实际情况调整 */
  margin: 0 auto;
  /* 居中显示，可选 */
  padding: 12px;
}

.search-box-wrapper .search-class-wrapper .font-header {
  font-size: 13px;
  color: #989797;
  margin-bottom: 10px;
}

.search-box-wrapper .search-class-wrapper .class-photo-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.search-box-wrapper .search-class-wrapper .class-photo-wrapper div {
  flex: 0 0 46%;
  /* 设置盒子宽度为每行的一半，留有一些间距 */
  margin: 2%;
  /* 设置盒子之间的间距，可以根据需要调整 */
  box-sizing: border-box;
  /* 防止边框和内边距增加盒子宽度 */
  position: relative;
}

.search-box-wrapper .search-class-wrapper .class-photo-wrapper div img {
  width: 100%;
  /* 图片宽度100% */
  height: 130px;
  /* 图片高度自适应 */
  border-radius: 10px;
}

.search-box-wrapper .search-class-wrapper .class-photo-wrapper div span {
  position: absolute;
  bottom: 15px;
  /* 距离底部5px，可以根据需要调整 */
  left: 50%;
  /* 居中 */
  transform: translateX(-50%);
  /* 居中 */
  padding: 5px;
  /* 设置内边距，可以根据需要调整 */
  font-size: 14px;
  /* 设置文字大小，可以根据需要调整 */
  color: #fff;
}
